<!-- 工单解答 -->
<template>
  <div>
    <my-header title="问题反馈" :showBack="true"/>
    <div class="feedback">
      <ol class="feedback_top van-hairline--bottom">
        <li @click="selected=0">
          <span :class="[selected==0?'selected':'']">提交工单</span>
        </li>
        <li @click="selected=1">
          <span :class="[selected==1?'selected':'']">我的工单</span>
        </li>
      </ol>
      <div v-show="selected==0" class="feedback_0">
        <h3 class="type_tit">选择反馈类型</h3>
        <ol>
          <li @click="actived=index;feedbackCode=item.dictValue" v-for="(item,index) in feedbackType" :key="index"><span :class="[actived==index?'actived':'']">{{item.dictLabel}}</span></li>
        </ol>
        <div class="input_box_1">
          <label>问题描述</label>
          <textarea v-model.trim="feedbackContext" placeholder="请尽量详细的描述您的问题（10-200字）"></textarea>
        </div>
        <!-- <div class="input_box_2">
          <label>联系方式</label>
          <input type="text" v-model.trim="feedbackContacts" placeholder="邮箱/电话/qq/微信">
        </div> -->

        <div class="common_btn">
          <van-button type="primary" size="large" @click="pushFeedback">提交</van-button>
        </div>
      </div>

      <div v-show="selected==1" class="feedback_1">
        <ol>
          <li v-for="item in feedbackList">
            <label>
              <span>{{item.createTime|formatDate}}</span>
              <span>{{item.feedbackStatus|status}}</span>
            </label>
            <p>{{item.feedbackContext}}</p>
            <div>
              <em class="main_color">回复：</em>{{item.feedbackRemark||'正在处理，我们会尽快为您处理'}}
            </div>
          </li>
        </ol>
      </div>
    </div>
  </div>
</template>

<script>
import timeFormat from "../../store/timeFormat";
import header from "@/components/header";
import { Toast } from "vant";
export default {
  data () {
    return {
      selected:0,
      actived:0,

      feedbackType:[],
      feedbackCode:'',
      feedbackContext:'',
      feedbackContacts:'',

      feedbackList:[],
    };
  },
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return timeFormat.formatDate(date, "yyyy-MM-dd");
    },
    status(val){
      if(val==1){
        return '正在处理';
      } else if(val==2){
        return '已处理'
      } else if(val==3){
        return '不予处理'
      }
    }
  },
  components: {
    "my-header": header
  },

  mounted(){
    this.getFeedbackType();
    this.getFeedbackList();
  },

  methods: {
    getFeedbackType(){
      this.$ajax(this.$api.getFeedbackType).then(
        res=>{
          if(res.code==0){
            if(res.msg&&res.msg.length>0){
              this.feedbackType = res.msg;
              this.feedbackCode = res.msg[0].dictCode;
            }
            
          }
        }
      )
    },

    pushFeedback(){
      let params = {
        type:this.feedbackCode,
        context:this.feedbackContext,
        feedbackContacts:this.feedbackContacts
      }
      if(!params.context){
        Toast({ message: "请填写反馈内容", position: "bottom" });
        return;
      }else if(params.context.length<10 || params.context.length>200){
        Toast({ message: "反馈内容字数在10-200之间", position: "bottom" });
        return;
      }
      this.$ajax(this.$api.pushFeedback,params).then(
        res=>{
          if(res.code==0){
            Toast({message: res.msg,position: "bottom"});
            this.getFeedbackList();
            this.actived = 0;
            this.feedbackCode = this.feedbackType[0].dictValue;
            this.feedbackContext = "";
            this.feedbackContacts = "";
          }else{
            Toast({message: res.msg,position: "bottom"});
          }
        }
      )
    },

    getFeedbackList(){
      this.$ajax(this.$api.getFeedbackList).then(
        res=>{
          if(res.code==0){
            this.feedbackList = res.msg;
          }
        }
      )
    }
  }
}

</script>
<style lang='less' scoped>
.feedback_top{
  display: flex;
  li{
    width: 50%;
    text-align: center;
    line-height: 44px;
    background-color: #a2403c;
    color: #d0ac82;
    .selected{
      display: inline-block;
      position: relative;
      color: #f7f2f2;
      &::after{
        content: "";
        position: absolute;
        bottom: 0;
        left: 1em;
        width: 2em;
        height: 2px;
        background: #ffffff;
      }
    }
  }
}
.feedback_0{
  ol{
    background: #fff;
    display: flex;
    border-bottom: 1px solid #eeeeee;
    li{
      width: 25%;
      padding: 10px 0 15px;
      text-align: center;
      box-sizing: border-box;
      span{
        display: inline-block;
        padding: 6px 0;
        border-radius: 50px;
        background-color: #f5f5f5;
        min-width: 76px;
        width: 20vw;
        em{
          margin: 0 1em;
        }
      }
      .actived{
        color: #0587d9;
        background-color:#f5f5f5;
      }
    }
  }

  .input_box_1{
    margin-top: 10px;
    padding: 0 15px 10px;
    background-color: #fff;
    label{
      display: block;
      line-height: 40px;
      font-size: 16px;
    }
    textarea{
      background-color: #f3f0f0;
      width: 100%;
      height: 150px;
      border: none;
      resize: none;
      padding: 5px;
      box-sizing: border-box;
    }
  }
  .input_box_2{
    padding: 10px 15px 30px;
    background-color: #fff;
    label{
      display: block;
      line-height: 40px;
      font-size: 16px;
    }
    input{
      background-color: #f5f5f5;
      width: 100%;
      border: none;
      resize: none;
      padding: 5px;
      box-sizing: border-box;
    }
  }
}
.feedback_1{
  li{
    margin-top: 10px;
    background-color: #ebebeb;
    padding: 0 15px 15px;
    label{
      display: flex;
      justify-content: space-between;
      line-height: 36px;
      span{
        &:nth-child(2){
          color: #333333;
        }
      }
    }
    p{
      line-height: 20px;
      color: #666;
    }
    div{
      margin-top: 15px;
      background-color: #f5f5f5;
      color: #666;
      padding: 5px;
      line-height: 20px;
    }
  }
}
.common_btn{padding: 0 12px;}
.type_tit{padding: 10px 0 15px 10px;border-bottom: 1px solid #eeeeee;}
</style>